<script setup lang="tsx">
import { groupOrderDetailsApi, adminGroupOrderDetailsApi } from '@/api/Order'
import { IntegralOrderStateShowDict, SubOrderStateDict } from '@/utils/dict'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const props = defineProps({
  id: {
    type: Number,
    default: 0
  }
})

const detail = ref<any>({})
let processedActiveImgList = ref<any>({})

const getDetail = async () => {
  const api = userStore.userInfo.roles.includes('商家')
    ? adminGroupOrderDetailsApi
    : groupOrderDetailsApi
  const res = await api(props.id)
  detail.value = res.data
  processedActiveImgList.value = res.data.activeImg.includes(',')
    ? res.data.activeImg.split(',').map((url) => url.trim())
    : [res.data.activeImg]
}
onMounted(() => {
  getDetail()
})
</script>

<template>
  <div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">订单编号：{{ detail.orderNo }}</div>
      <div class="flex-[50%] px-5"
        >订单状态：{{ IntegralOrderStateShowDict[detail.orderState] }}</div
      >
    </div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">下单人：{{ detail.orderNickName }}/{{ detail.orderMobile }}</div>
      <div class="flex-[50%] px-5">订单金额：{{ detail.orderPrice }}</div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">实付积分：{{ detail.payPrice }}</div>
      <div class="flex-[50%] px-5">下单时间：{{ detail.orderTime }}</div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>所属商家：</span>
        <span>{{ detail.businessName }}</span>
      </div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">产品名称</div>
    <div class="flex flex-wrap text-14px py-2">
      <div :key="index" v-for="(item, index) in processedActiveImgList">
        <ElImage
          :src="item"
          fit="cover"
          class="w-15 mr-2"
          lazy
          :preview-src-list="processedActiveImgList"
          preview-teleported
        />
      </div>
      <div class="ml-2">{{ detail.activeTitle }}</div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">子订单信息</div>
    <div class="flex text-14px py-2">
      <el-table :data="detail.adminOrderItems" border style="width: 100%">
        <el-table-column prop="subOrderNo" label="子订单号" width="120" />
        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column prop="goodsPrice" label="商品价格" />
        <el-table-column prop="subOrderState" label="子订单状态">
          <template #default="tableProps">
            {{ SubOrderStateDict[tableProps.row.subOrderState] }}
          </template>
        </el-table-column>
        <el-table-column prop="merchantName" label="核销商户" />
        <el-table-column prop="verifyTime" label="核销时间" />
      </el-table>
    </div>
  </div>
</template>
